import React, { useState } from 'react';
import { View, Text, StyleSheet, Image, TouchableOpacity, Dimensions } from 'react-native';
import { Icon } from 'react-native-elements';
import { Card, List, Tag, WhiteSpace } from '@ant-design/react-native';
import CustomModal from '../components/CustomModal';

const { width } = Dimensions.get('window');

const NextPage = () => {
  const [buttonSelected, setButtonSelected] = useState(false);
  const [isModalVisible, setModalVisible] = useState(false);
  const [isReportModalVisible, setReportModalVisible] = useState(false);

  const handleButtonPress = () => {
    setModalVisible(true);
  };

  const handleYesPress = () => {
    setModalVisible(false);
    setReportModalVisible(true);
  };

  const handleNoPress = () => {
    setModalVisible(false);
  };

  const handleCloseReportModal = () => {
    setReportModalVisible(false);
  };

  return (
    <View style={styles.container}>
      {/* 中间：待举报车辆信息 */}
      <View style={styles.middle}>
        <Card style={styles.infoCard}>
          <Card.Header
            title={<Text style={styles.cardTitle}>待举报车辆信息</Text>}
            thumb={<Icon name="car" type="font-awesome" color="#1890ff" size={20} />}
          />
          <Card.Body>
            <List>
              <List.Item
                style={styles.listItem}
                extra={<Tag color="blue">武汉市洪山区交警大队</Tag>}
              >
                所属辖区
              </List.Item>
              <List.Item
                style={styles.listItem}
                extra={<Tag color="red">闯红灯</Tag>}
              >
                违法类型
              </List.Item>
              <List.Item
                style={styles.listItem}
                extra="2021-12-14 17:58:05"
              >
                违法时间
              </List.Item>
              <List.Item
                style={styles.listItem}
                extra="XXXXXX"
              >
                违法车辆车牌号
              </List.Item>
              <List.Item
                style={styles.listItem}
                extra="50元"
              >
                举报奖励
              </List.Item>
              <List.Item
                style={styles.listItem}
                extra={<Tag color="green">12h内</Tag>}
              >
                预计受理时间
              </List.Item>
            </List>
          </Card.Body>
        </Card>
      </View>

      {/* 右侧：我的证据 */}
      <View style={styles.right}>
        <Card style={styles.evidenceCard}>
          <Card.Header
            title={<Text style={styles.cardTitle}>我的证据</Text>}
            thumb={<Icon name="file" type="font-awesome" color="#1890ff" size={20} />}
          />
          <Card.Body style={styles.evidenceCardBody}>
            <View style={styles.videoContainer}>
              <Image
                source={{ uri: 'https://www.270top.com/img/20210227/4861759.jpg' }}
                style={styles.videoImage}
              />
              <Icon 
                name="play-circle" 
                type="font-awesome" 
                color="white" 
                size={50} 
                containerStyle={styles.playIcon} 
              />
            </View>
          </Card.Body>
        </Card>

        <TouchableOpacity
          style={[styles.nextButton, buttonSelected && styles.selectedButton]}
          onPress={handleButtonPress}
        >
          <Text style={styles.nextButtonText}>下一步</Text>
        </TouchableOpacity>
      </View>

      {/* 第一个弹窗 - 是否确定举报 */}
      <CustomModal
        visible={isModalVisible}
        onClose={handleNoPress}
        title="确认举报"
        content="是否确定进行举报？"
        iconName="exclamation-circle"
        iconColor="#faad14"
        buttons={[
          {
            text: '否',
            onPress: handleNoPress,
            style: { backgroundColor: 'white', borderWidth: 1, borderColor: '#1890ff' },
            textStyle: { color: '#1890ff' }
          },
          {
            text: '是',
            onPress: handleYesPress,
            style: { backgroundColor: '#1890ff' },
            textStyle: { color: 'white' }
          }
        ]}
      />

      {/* 第二个弹窗 - 举报成功 */}
      <CustomModal
        visible={isReportModalVisible}
        onClose={handleCloseReportModal}
        title="举报成功"
        content={[
          '您已举报！',
          '举报理由: 闯红灯',
          '后续举报进度更新将通过该邮件发送给您'
        ]}
        iconName="check-circle"
        iconColor="#52c41a"
        buttons={[
          {
            text: '确定',
            onPress: handleCloseReportModal,
            style: { backgroundColor: '#1890ff' },
            textStyle: { color: 'white' }
          }
        ]}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
  },
  middle: {
    flex: 3, // 修改为3份
    backgroundColor: 'white',
    justifyContent: 'flex-start',
    padding: 10,
  },
  infoCard: {
    backgroundColor: '#F0F8FF',
    borderRadius: 8,
    marginBottom: 10,
  },
  right: {
    flex: 7, // 修改为7份
    backgroundColor: 'white',
    justifyContent: 'flex-start',
    alignItems: 'center',
    padding: 10,
  },
  evidenceCard: {
    backgroundColor: '#F0F8FF',
    borderRadius: 8,
    marginBottom: 20,
    width: '100%',
    height: '80%',
  },
  videoContainer: {
    width: '100%',
    aspectRatio: 16/9,
    backgroundColor: 'gray',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 8,
    overflow: 'hidden',
    marginTop: '2%',
  },
  videoImage: {
    width: '100%',
    height: '100%',
    resizeMode: 'cover',
  },
  playIcon: {
    position: 'absolute',
  },
  nextButton: {
    paddingVertical: 12,
    paddingHorizontal: 24,
    backgroundColor: '#1890ff',
    borderRadius: 6,
    marginTop: 20,
  },
  selectedButton: {
    backgroundColor: '#40a9ff',
  },
  nextButtonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: '500',
  },
  cardTitle: {
    color: '#4682B4',
    fontSize: 20,
    fontWeight: 'bold',
  },
  listItem: {
    paddingVertical: 12,
    marginVertical: 4,
  },
  evidenceCardBody: {
    flex: 1,
    paddingVertical: 20,
  },
});

export default NextPage;